<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .canvas{
      background-color: #1e1e1e;
    }
  </style>
</head>
<body>
  <!-- 1.定义canvas标签,不许指定高宽 -->
  <canvas class="canvas" width="800" height="400"></canvas>
  <script>
   const canvas=document.querySelector('.canvas')
   const ctx=canvas.getContext('2d')
   // ctx是一个对象 有很多操作canvas 画布的方法 边框 内容 图片等等操作
  //  console.log(ctx);
  //   3.绘画
  //   划线

  // 部分画图的开始与结束
  ctx.beginPath()
  ctx.strokeStyle='red'
    // 两点一线 形成一条直线
    ctx.moveTo(100,100) //第一个点
    ctx.lineTo(200,200) //第二个点 
    ctx.lineTo(300,100) //从前面那个点继续两点一线
    ctx.lineTo(100,100) //从前面那个点继续两点一线
    ctx.stroke()  //画笔画完之后需要调用  ctx.stroke()  方法闭合
    ctx.closePath()

    // 画矩形
    // strokeRect参数  一共有四个参数  前两个是一个点的坐标 矩形的左上角的坐标   第3,4 个参数的矩形宽高的大小 
    ctx.strokeRect(100,250,100,100)
    ctx.fillStyle = "red";
    ctx.fillRect(100, 250, 100, 100);

    // 画圆
    // 画图 起始
    ctx.beginPath()
    // arc 画圆的方法 前面两个参数确定圆心,第三个参数是半径, 第4-第5是画多大的圆
    //  可以是半圆随便花,0-2*Math.PI=360°, 第6个参数是布尔值 true 顺时针画 false 逆时针画
    ctx.arc(400,100,50,0,2*Math.PI,true)
    ctx.stroke()
    // 画图 结束
    ctx.closePath()

  // 绘制文字 
  ctx.font='22px 宋体'
  ctx.fillText('尚硅谷',400,200)
  </script>
</body>
</html>